<script setup>

import {BaseImgUrl} from "../../utils/lshttp";
import {onMounted, ref} from "vue";
import {onLoad, onPageShow, onShow} from "@dcloudio/uni-app";
import {redHotAPI} from "../../services/shop_detail";
import {carRedAPI} from "../../services/me";

const props = defineProps({
  shopID: String,
  isPZ: {
    default: false,
    type: Boolean,
  },
  isRed: {
    default: true,
    type: Boolean,
  },
  redGf: {
    default: false,
    type: Boolean,
  },
})
const emits = defineEmits(['update:red_id', 'update:card_id'])
const redCardNum = ref()
const redCardList = ref()
const redCardNumGf = ref()
const redCardListGf = ref([])
const redItem = ref()
const cardItem = ref()
const showQuan = ref(false)
const showPZQuan = ref(false)
const selectRedItem = (item, isSelect) => {
  redCardList.value?.card.forEach((itemC) => {
    itemC.isSelector = false
  })
  if(props.redGf){
    console.log('官返item=',item)
    redCardListGf.value.forEach((itemC) => {
      itemC.isSelector = false
    })
  }else {
    console.log('霸王餐item=',item)
    redCardList.value?.red.forEach((itemC) => {
      itemC.isSelector = false
    })
  }


  redItem.value = null
  cardItem.value = null
  if (redItem.value?.red_id === item.red_id) {
    redItem.value = null
    emits('update:red_id', 0)
    return
  }
  item.isSelector = !isSelect
  if (item.isSelector) {
    redItem.value = item
    emits('update:red_id', item.red_id)
    emits('update:card_id', 0)
  }
  console.log("item.isSelector", redItem.value?.red_id)
  showQuan.value = false
}
const selectCardItem = (item, isSelect) => {
  redCardList.value?.card.forEach((itemC) => {
    itemC.isSelector = false
  })
  redCardList.value?.red.forEach((itemC) => {
    itemC.isSelector = false
  })
  redItem.value = null
  cardItem.value = null
  if (cardItem.value?.card_id === item.card_id) {
    cardItem.value = null
    emits('update:card_id', 0)
    return
  }
  item.isSelector = !isSelect
  if (item.isSelector) {
    cardItem.value = item
    emits('update:red_id', 0)
    emits('update:card_id', item.card_id)
  }
  showPZQuan.value = false
}
onMounted(() => {
  getRedHot()
})

onShow(() => {
  // getRedHot()
})
const getRedHot = async () => {
  const resRed = ref()
  // 霸王餐店铺获取红包
  resRed.value = await redHotAPI(props.shopID)
  redCardList.value = resRed.value.result
  console.log("redCardList=", redCardList.value)
  redCardNum.value = resRed.value.result.card.length + resRed.value.result.red.length
  console.log("props", redCardList.value)
}

const redBag = (isShow) => {
  if (isShow) {
    uni.showToast({title: '无可用卡券', icon: 'none', duration: 2000})
    return
  }
  showQuan.value = true
}
const pzq = (isShow) => {
  if (isShow) {
    uni.showToast({title: '无可用卡券', icon: 'none', duration: 2000})
    return
  }
  showPZQuan.value = true
}
</script>

<template>
  <view style="width: 100%;">
    <view class="title">本次活动需消耗</view>
    <view style="display: flex;align-items: center;padding: 8rpx 10rpx;background: #F7F7F7;border-radius: 12rpx;" @click="redBag(redCardList?.red.length === 0)" v-if="isRed">
      <image :src="BaseImgUrl + '/shop/shop_detail_icon06.png'" style="width: 36rpx;height: 36rpx"></image>
      <text class="item_title">卡券红包剩余<text style="color: #FE7B21;">{{ redCardNum || 0 }}</text>张</text>
      <view style="flex: 1"></view>
      <text class="item_sub_title" style="color: #999999;font-weight: normal" v-if="redCardList?.red.length === 0">
        无可用卡券
      </text>
      <text class="item_sub_title" v-else-if="redItem">{{ '本单额外补贴 ￥' + redItem?.money }}</text>
      <text class="item_sub_title2" v-else>{{ (redCardNum || 0) + '个可用' }}</text>
      <image style="width: 22rpx;height: 22rpx;margin-left: 10rpx"
             :src="BaseImgUrl + '/once/right.png'"></image>
    </view>
    <!--    <view style="height: 10rpx" v-if="isRed"></view>-->
    <view style="display: flex;align-items: center" @click="pzq(redCardList?.card.length === 0)" v-if="isPZ">
      <image :src="BaseImgUrl + '/shop/quan.png'" style="width: 36rpx;height: 36rpx"></image>
      <text class="item_title">品质专享券</text>
      <view style="flex: 1"></view>
      <text class="item_sub_title" style="color: #999999;font-weight: normal" v-if="redCardList?.card.length === 0">
        无可用卡券
      </text>
      <text class="item_sub_title" v-else-if="cardItem">{{ '使用1张' }}</text>
      <text class="item_sub_title2" v-else>{{ (redCardNum || 0) + '个可用' }}</text>
      <image style="width: 22rpx;height: 22rpx;margin-left: 10rpx"
             :src="BaseImgUrl + '/once/right.png'"></image>
    </view>
    <view class="pzzxq"  @click="pzq(redCardList?.card.length === 0)"  v-if="isPZ">
      <text class="item_title">
        品质专享券剩余
        <text style="color: #FA642B">{{ redCardNum || 0 }}</text>
        张
      </text>
      <view style="flex: 1"></view>
      <text class="item_sub_title1">可通过
        <text style="color: #FA642B">升级会员</text>
        等级获得&nbsp;
      </text>
<!--          <image style="width: 22rpx;height: 22rpx;margin-left: 10rpx"-->
<!--                 :src="BaseImgUrl + '/once/right.png'"></image>-->
    </view>
  </view>

  <u-popup
      :show="showQuan"
      :round="10"
      mode="bottom"
      @close="showQuan = false"
      closeable>
    <view class="pop-root">
      <view style="height: 10rpx"></view>
      <view class="box-title">领食惊喜红包</view>
      <view style="height: 20rpx"></view>
      <scroll-view scroll-y="true" style="height: 680rpx;">
        <view v-for="(item,index) in redCardList?.red" :key="index" @click="selectRedItem(item,item.isSelector)">
          <view class="box-item">
            <view style="position: relative;width: 69rpx;height: 86rpx;margin-left: 50rpx">
              <image class="money_bg"
                     :src="BaseImgUrl + '/shop/red_bg.png'"></image>
              <view class="money_text">
                <text>{{ item.money }}</text>
                <text style="font-size: 15rpx">元</text>
              </view>
            </view>
            <view style="margin-left: 90rpx">
              <view class="box_item_title">
                {{ item.title }}
                <text style="color: #FA642B;font-size: 36rpx">{{ item.money }}元</text>
              </view>
              <view class="box_item_time">
                有效期至 {{ item.valid_date }}
              </view>
            </view>
            <view style="flex: 1"></view>
            <view class="dianji">
              <image v-if="item.isSelector" class="check_icon"
                     :src="BaseImgUrl + '/images/select1.png'"></image>
              <view v-else class="check_icon"
                    style="background-color: #DEDEDE;border-radius: 300rpx;width: 38rpx;height: 38rpx"></view>
            </view>
          </view>
        </view>
        <view style="height: 60rpx"></view>
        <u-safe-bottom></u-safe-bottom>
      </scroll-view>
    </view>
  </u-popup>
  <u-popup
      :show="showPZQuan"
      :round="10"
      mode="bottom"
      @close="showPZQuan = false"
      closeable>
    <view class="pop-root">
      <view style="height: 10rpx"></view>
      <view class="box-title">品质专享券</view>
      <view style="height: 20rpx"></view>
      <scroll-view scroll-y="true" style="height: 680rpx;">
        <view v-for="(item,index) in redCardList?.card" :key="index" @click="selectCardItem(item,item.isSelector)">
          <view class="box-item">
            <view style="position: relative;width: 69rpx;height: 86rpx;margin-left: 50rpx">
              <image class="money_bg1"
                     :src="BaseImgUrl + '/vip/gift_quan.png'"></image>
              <view class="money_text">
                <!--                <text>{{ 25 }}</text>-->
                <!--                <text style="font-size: 20rpx">元</text>-->
              </view>
            </view>
            <view style="margin-left: 90rpx">
              <view class="box_item_title">
                {{ item.title }}
                <!--                <text style="color: #FA642B;font-size: 36rpx">25元</text>-->
              </view>
              <view class="box_item_time">
                有效期至 {{ item.valid_date }}
              </view>
            </view>
            <view style="flex: 1"></view>
            <view class="dianji">
              <image v-if="item.isSelector" class="check_icon"
                     :src="BaseImgUrl + '/images/select1.png'"></image>
              <view v-else class="check_icon"
                    style="background-color: #DEDEDE;border-radius: 300rpx;width: 38rpx;height: 38rpx"></view>
            </view>
          </view>
        </view>
        <view style="height: 60rpx"></view>
        <u-safe-bottom></u-safe-bottom>
      </scroll-view>
    </view>
  </u-popup>
</template>

<style scoped lang="scss">

.pop-root {
  background-color: #f8f8f8;
  border-radius: 30rpx 30rpx 0 0;

  .box-item {
    height: 160rpx;
    margin: 20rpx 30rpx 0;
    padding-right: 30rpx;
    display: flex;
    align-items: center;
    background: url('https://lsz.lszbg.com/imgs/shop/quan_bg.png') no-repeat -3rpx 0;
    background-size: cover;
  }

  .box-title {
    margin-top: 20rpx;
    text-align: center;
    font-weight: bold;
    font-size: 36rpx;
    color: #3D3D3D;
    line-height: 48rpx;
  }
}

.title {
  font-weight: 400;
  font-size: 26rpx;
  color: #888888;
  line-height: 28rpx;
  padding: 20rpx 0;
}

.item_title {
  font-weight: 400;
  font-size: 26rpx;
  color: #3D3D3D;
  line-height: 28rpx;
  margin: 10rpx;
}

.item_sub_title {
  font-size: 26rpx;
  color: #FA642B;
  line-height: 28rpx;
}

.item_sub_title2 {
  font-size: 24rpx;
  color: #FFFFFF;
  padding: 0 8rpx;
  height: 40rpx;
  background: #FC754A;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  line-height: 40rpx;
  text-align: center;
}

.item_sub_title1 {
  font-weight: bold;
  font-size: 24rpx;
  color: #3D3D3D;
  line-height: 28rpx;
}

.pzzxq {
  margin-top: 10rpx;
  width: 100%;
  height: 60rpx;
  background: #F6F6F6;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  display: flex;
  align-items: center;
  padding: 0 6rpx;
}

.box_item_title {
  font-weight: bold;
  font-size: 32rpx;
  color: #333333;
  line-height: 48rpx;
}

.box_item_time {
  font-weight: 400;
  font-size: 24rpx;
  color: #888888;
  line-height: 48rpx;
}

.money_bg {
  width: 69rpx;
  height: 86rpx;
  position: absolute;
  z-index: 1;
}

.money_bg1 {
  width: 69rpx;
  height: 69rpx;
  position: absolute;
  z-index: 1;
}

.money_text {
  color: #fdd444;
  font-weight: bold;
  font-size: 15rpx;
  z-index: 100;
  position: relative;
  width: 69rpx;
  line-height: 56rpx;
  text-align: center;
  margin-top: 38rpx;
}

.dianji {
  margin-left: auto;

  image {
    width: 36rpx !important;
    height: 36rpx !important;
  }
}
</style>